<template>
    <div>
        <k-form-design @save="handleSave" title="表单设计器" ref='kfd'/>
        <a-modal title="添加表单" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
            @cancel="handleCancel">
            <a-form class="form" :inline="false" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }"
                size="small">
                <a-form-item label="表单名称">
                    <a-input placeholder="请输入" v-model="form.formName"></a-input>
                </a-form-item>
                <a-form-item label="备注">
                    <a-input placeholder="请输入" v-model="form.remark"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import { getForm, addForm, updateForm } from "../../components/process/api/form"
export default {
    data() {
        return {
            form: {
                formId: null,
                formName: null,
                formContent: null,
                remark: null
            },
            visible: false,
            confirmLoading: false,
            formConf: null
        }
    },
    created(){
        console.log("执行")
    },
    mounted() {
        console.log("执行访问")
        const that = this;
        const formId = that.$route.query && that.$route.query.formId;
        if (formId) {
            getForm(formId).then(res => {
                that.formConf = JSON.parse(res.data.formContent);
                that.form = res.data;
                this.$refs.kfd.handleSetData(this.formConf)
            })
        }else{
            this.$refs.kfd.handleSetData()
        }
    },
    methods: {
        handleSave(values) {
            this.showModal();
            this.form.formContent = values;
            console.log(values);
        },
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            this.confirmLoading = true;
            if (this.form.formId != null) {
                updateForm(this.form).then(response => {
                    this.$message.success("修改成功");
                }).catch(() => {
                    this.$message.success("修改失败");
                }).finally(() => {
                    this.visible = false;
                    this.confirmLoading = false;
                });
            } else {
                addForm(this.form).then(response => {
                    this.$message.success("新增成功");
                }).catch(() => {
                    this.$message.success("新增失败");
                }).finally(() => {
                    this.visible = false;
                    this.confirmLoading = false;
                });
            }

            // setTimeout(() => {
            //     this.visible = false;
            //     this.confirmLoading = false;
            // }, 2000);

        },
        handleCancel(e) {

            this.visible = false;
        },
    }
}
</script>

<style>

</style>